<template>
	<view class="informantion_mask" @tap="closeWindow">
		<view class="informantion_content" @tap.stop.prevent>
			<view class="no-vip" v-if="vipShow">
				<view class="no-vip-txt">
					您要上系统，需要先成为会员
				</view>
				<view class="btn" @click="toVip">
					确认
				</view>
			</view>
			<view class="be-vip" v-if="vipShows">
				<view class="be-vip-tit">
					成为会员
				</view>
				<view class="be-vip-sel">
					<view class="be-vip-sel-box" v-for="(item,i) in vipList" :key="i">
						<p class="be-vip-sel-box-tit">{{item.name}}</p>
						<view class="be-vip-sel-ul">
							<view :class="checkVipIndex==e.id?'be-vip-sel-ul-li be-vip-sel-ul-lis':'be-vip-sel-ul-li'"
								v-for="(e,y) in item.viplist" :key="y" @click="checkVip(e)">
								<p>{{e.name}}</p>
								<p>{{e.price}}元/年</p>
							</view>
						</view>
					</view>
				</view>
				<view class="btn" @click="toVipOrder">
					确认
				</view>
			</view>
			<view class="take-ject" v-if="jectShow">
				<view class="take-ject-tit">
					项目参与
				</view>
				<view class="take-ject-box">
					<checkbox-group @change="checkboxChange">
						<view class="take-ject-box-item" v-for="item in ject" :key="item.id">
							<checkbox color="#FFCC33" :value="item.id" :checked="item.checked" />
							<view class="take-ject-box-radio">
								{{item.typename}}
							</view>
						</view>
					</checkbox-group>
				</view>
				<view class="take-ject-msg">
					<!-- <u--textarea v-model="msg" placeholder="请在此输入备注" count></u--textarea> -->
					<textarea v-model="note" class="take-ject-msg-input" maxlength="150" placeholder="请在此输入备注" />
				</view>
				<view class="btn" @click="JectSubmit">
					确认
				</view>
			</view>
			<view class="means" v-if="jectShows">
				<view class="means-tit">
					填写资料
				</view>
				<view class="means-box">
					<u-form ref="uForm">
						<u-form-item :label="label_title" label-width="160rpx">
							<u-input maxlength="15" v-model="project_name" />
						</u-form-item>

						<u-form-item label="上传资料" label-width="160rpx">
							<!-- 	<u-upload :showProgress="false" @on-uploaded="uploadSuccess" @on-remove="uploadRemove"
								:action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" width="138"
								height="138" maxCount="9" accept="all"></u-upload> -->
							<view
								style="display: flex;justify-content: space-between;margin-bottom: 10rpx;font-size: 30rpx;"
								@click="chooseFile">
								<u-icon name="plus-circle" size="34"></u-icon>
							</view>
							<view>
								<view v-for="(item, index) in fileList" :key="index"
									style="display: flex;align-items: center;">
									<view
										style="display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;margin-right: 10rpx;">
										{{ item.name }}
									</view>
									<u-icon name="trash" size="30" @click="delFile(index)"></u-icon>
								</view>
							</view>
							<!-- 	<view class="example-body" @click="">
								上传文件
							</view> -->
						</u-form-item>
						<u-form-item :label="label_title2" label-width="160rpx">
							<!-- <u-input v-model="project_desc" /> -->
							<textarea v-model="project_desc" maxlength="200" class="take-ject-msg-input"
								placeholder="请在此输入简介" />
						</u-form-item>
						<u-form-item label="请注意接听客服电话" label-width="300rpx" label-position="left">
							<p v-for="item in kefu">{{item.mobile}}</p>

						</u-form-item>
					</u-form>
				</view>
				<view class="u-flex u-row-between btn-group">
					<view class="btn btn_back" @click="closeWindow">
						取消
					</view>
					<view class="btn btn_success" @click="handleJtct">
						确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/env.js'

	export default {
		data() {
			return {
				vipList: [],
				isVip: '',
				vipShow: false,
				vipShows: false,
				jectShow: false,
				jectShows: false,
				checkVipIndex: -1,
				checkJectIndex: 0,
				orderData: null,
				ject: [],
				project_name: '',
				project_desc: '',
				projectId: '',
				token: uni.getStorageSync('token'),
				imgList: [],
				note: '',
				joinType: [],
				kefu: [],
				fileList: [],
				base_url:BASE_URL,
				label_title:'',
				label_title2:'',
				ajaxurl:''
			}
		},
		
		onLoad(options) {
			this.switch_tijiao = uni.getStorageSync("switch_tijiao");
			if(this.switch_tijiao == 'project'){
				this.label_title = "项目名称";
				this.label = "项目";
				this.ajaxurl='/api/project/haveProject';
				this.label_title2 = "项目简介";
			}
			if(this.switch_tijiao == 'wenhua'){
				this.label_title = "文化名称";
				this.label = "文化";
				this.ajaxurl='/api/index/wenchuanhave';
				this.label_title2 = "文化简介";
			}
			if(this.switch_tijiao == 'lujing'){
				this.label_title = "路径区域";
				this.label = "路径";
				this.ajaxurl='/api/city/haveProject';
				this.label_title2 = "申请人简介";
			}
			console.log(options)
			this.isVip = options.isvip
			this.type = options.type
			this.getuserInfo()
			if (options.id) {
				this.projectId = options.id
			}
			if (this.isVip == 0) {
				this.vipShow = true
			} else if (this.isVip == 1 && this.type == 0) {
				this.getKefu()
				this.jectShows = true
			} else if (this.isVip == 1 && this.type == 1) {
				this.getTypeList()
			}
		},
		onShow() {

		},
		methods: {
			onSelect(e) {
				console.log(e)
				// e.tempFiles
				// uni.uploadFile({
				// 	url: BASE_URL+'/api/common/upload', 
				// 	filePath: e.tempFiles[0],
				// 	name: 'file',
				// 	formData: {},
				// 	success: (uploadFileRes) => {
				// 		console.log(uploadFileRes);
				// 		this.fileList= this.fileList.push(uploadFileRes)
				// 	}
				// });
			},
			onDelete(e) {
				console.log(e)
			},
			delFile(index) {
				this.fileList.splice(index, 1)
				this.imgList = ''
			},
			chooseFile() {
				//#ifdef  H5
				uni.chooseFile({
					count: 10,
					success: (res) => {
						this.fileList = res.tempFiles;
						console.log(this.fileList)
						this.uploadFile()
					},
					fail: (err) => {
						console.log(err);
					}
				});
				//#endif
				// #ifdef MP-WEIXIN
				uni.chooseMessageFile({
					
					count: 10,
					success: (res) => {
						this.fileList = res.tempFiles;
						console.log(this.fileList)
						this.uploadFile()
					},
					fail: (err) => {
						console.log(err);
					}
				});
				//#endif
					},
					// 上传文件
					uploadFile() {
						this.fileList.forEach(file => {
							uni.uploadFile({
								// #ifdef MP-WEIXIN
								url: `${BASE_URL}/api/common/upload`, //这里需要引入站点名称然后与后端接口进行拼接；import projectConfig from '@/common/config.js'
								//#endif
								filePath: file.path,
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (res) => {
									console.log(res)
									this.imgList = JSON.parse(res.data).data.fullurl
								},
								fail: (err) => {
									console.log('失败啦', err);
								}
							})
						})
					},
					checkboxChange(e) {
						this.joinType = e.detail.value;
						console.log(this.joinType)
					},

					//点击mask消失，由于是页面实际相当于返回
					closeWindow() {
						uni.navigateBack({
							delta: 1
						})
					},
					toVip() {
						this.vipShow = false
						this.vipShows = true
						this.getVipList()

					},
					getVipList() {
						uni.request({
							url: this.base_url+'/api/project/vipprice',
							method: 'POST',
							header: {
								'Content-Type': 'application/json',
								token: uni.getStorageSync('token')
							},
							data: {},
							success: res => {
								this.vipList = res.data.data
								console.log(res);
							},
							fail: () => {},
							complete: () => {}
						});
					},
					checkVip(e) {
						this.checkVipIndex = e.id
						this.orderData = e
					},
					selJect(e) {
						console.log(e)
						this.checkJectIndex = e
					},
					toVipOrder() {
						console.log(this.orderData)
						if (this.checkVipIndex == -1) {
							uni.showToast({
								title: '请选择会员',
								icon: 'none'
							})
							return
						}
						console.log(this.orderData)
						uni.setStorageSync('order', this.orderData)
						uni.redirectTo({
							url: '/pages/index/project_list/qrorder'
						})
					},
					JectSubmit() {
						console.log(this.projectId)
						uni.request({
							url: this.base_url+'/api/project/joinProject',
							method: 'POST',
							header: {
								'Content-Type': 'application/json',
								token: uni.getStorageSync('token')
							},
							data: {
								project_id: this.projectId,
								join_type: this.joinType.join(','),
								note: this.note,
							},
							success: res => {
								console.log(res);
								if (res.data.code == 1) {
									uni.redirectTo({
										url: '/pages/index/project_list/success?type=' + 1 +
											'&kefu=' + 1
									})
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							},
							fail: () => {},
							complete: () => {}
						});
					},
					handleJtct() {
						if (this.switch_tijiao != 'project'&&this.project_name == '') {
							uni.showToast({
								title: '请填写'+this.label+'名称',
								icon: 'none'
							})
							return
						}
						console.log("==imgList",this.imgList)
						let fromData = {};
						fromData = {
							project_name: this.project_name,
							file: this.imgList,
							project_desc: this.project_desc,
							token:uni.getStorageSync("token")
						}
						console.log(fromData)
						uni.request({
							url:  this.base_url+this.ajaxurl,
							method: 'POST',
							header: {
								'Content-Type': 'application/json',
								token: uni.getStorageSync('token')
							},
							data: fromData,
							success: res => {
								console.log(res);
								if (res.data.code == 1) {
									uni.redirectTo({
										url: '/pages/index/project_list/success?type=' + 1
									})
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							},
							fail: () => {},
							complete: () => {}
						});

					},
					// api/index/typelist
					// 上传图片成功
					uploadSuccess(e) {
						this.imgList = [];
						console.log(e)
						e.forEach(item => {
							this.imgList.push(item.response.data.fullurl);
						});
					},

					// 移除图片
					uploadRemove(index) {
						this.imgList.splice(index, 1);
					},

					getuserInfo() {
						uni.request({
							url: this.$BASE_URL+'/api/info/user',
							method: 'POST',
							header: {
								'Content-Type': 'application/json',
								token: uni.getStorageSync('token')
							},
							data: {},
							success: res => {
								console.log(res);
								if (res.data.code == 0) {
									this.isVip = res.data.is_vip
								}
							},
						});
					},
					getTypeList() {
						this.$new_http("project.typeList", {}).then((res) => {
							console.log(res, 'res')
							// this.teacherData = res.data.data;
							if (res.code == 1) {
								this.ject = res.data
								console.log(this.ject)
								if (this.ject.length > 0) {
									this.jectShow = true
								}
							}
						});
					},
					getKefu() {
						this.$new_http("project.kefu", {}).then((res) => {
							console.log(res, 'res')
							// this.teacherData = res.data.data;
							if (res.code == 1) {
								this.kefu = res.data
							}
						});
					}

				},
			};
</script>

<style scoped>
	/* //设置背景色 */
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input {
		background-color: #ffffff !important;
		border-color: #ec6330 !important;
		color: #ec6330 !important;
	}

	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		content: '\2022';
	}

	checkbox .wx-checkbox-input {
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #cccccc;
	}

	// 选中样式
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 2rpx solid #cccccc;
		border-color: #fd4118;
		background: -webkit-linear-gradient(#fd4118, #ff851d);
	}

	// 选中图标样式
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		font-size: 28rpx;
		color: #fff;
	}
</style>
<style scoped lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.informantion_mask {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.informantion_content {
		width: 600rpx;
		overflow: hidden;
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx;
	}

	.btn {
		background: #ED861F;
		color: #fff;
		border-radius: 16rpx;
		display: inline-block;
		padding: 22rpx 150rpx;
		margin: 0 auto;
	}

	.no-vip {
		text-align: center;

		.no-vip-txt {
			margin-bottom: 30rpx;
		}
	}

	.be-vip {
		text-align: center;

		.be-vip-tit {
			text-align: center;
			font-weight: bold;
		}

		.be-vip-sel-box {
			.be-vip-sel-box-tit {
				font-weight: bold;
				margin: 30rpx 0;
				text-align: left;
			}

			.be-vip-sel-ul {
				display: flex;
				justify-content: space-between;
				gap: 30rpx;

				.be-vip-sel-ul-li {
					border: 1px solid #f6f6f6;
					border-radius: 8rpx;
					padding: 16rpx 40rpx;
					text-align: center;
				}

				.be-vip-sel-ul-lis {
					border: 1px solid #ED861F;
					color: #ED861F;
				}
			}

		}

		.btn {
			margin-top: 30rpx;
		}
	}

	.take-ject {
		text-align: center;

		.take-ject-tit {
			font-weight: bold;
		}

		.take-ject-box {
			.take-ject-box-radio {
				border: 1px solid #f6f6f6;
				padding: 20rpx;
				border-radius: 16rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				flex: 1;
				font-size: 28rpx;
				text-align: left;
			}
		}

		.btn {
			margin-top: 30rpx;
		}
	}

	.means {
		text-align: center;

		.means-tit {
			font-weight: bold;
		}

		.means-box {
			p {
				color: #ED861F;
			}
		}
	}

	.take-ject-msg {}

	.take-ject-msg-input {
		background: #f6f6f6;
		border-radius: 16rpx;
		margin-top: 20rpx;
		width: 100%;
		padding: 16rpx;
		text-align: left;
		height: 160rpx;
	}

	.u-checkbox {
		width: 100% !important;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}

	.files__name {
		font-size: 20rpx;
	}

	.take-ject-box-item {
		display: flex;
		align-items: center;
	}
	.btn-group{
		.btn{
			width: 45%;
			padding: 22rpx 0;
			color: #fff;
			border-radius: 16rpx;
			display: inline-block;
		}
		.btn_success{
			background: #ED861F;
		}
		.btn_back{
			background:#E6E5E5;
			color: #999999;
		}
	}
</style>